<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<title>ByteCollege云课</title>
	<link rel="stylesheet" th:href="@{font/css/font-awesome.min.css}">
	<link rel="stylesheet" th:href="@{css/bootstrap.css}">
	<link rel="stylesheet" th:href="@{css/wangEditor.css}"/>
	<script th:src="@{js/jquery-3.3.1.min.js}"></script>
	<script th:src="@{js/bootstrap.js}"></script>
	<script th:src="@{js/wangEditor.js}"></script>
	<script th:src="@{js/jquery.validate.js}"></script>
	<style>
		.item-header {
		    margin-bottom: 5px;
		}
		.line {
		    width: 20%;
		    display: inline-block;
		    border-top: 1px solid #777;
		    margin-bottom: 10px;
		}
		.item-title {
		    width: 100px;
		    display: inline-block;
		    color: #777;
		    font-size: 21px;
		}
		#publish label.error
		{
		    color:Red;
		    font-size:13px;
		    margin-left:5px;
		    padding-left:16px;
		}
		.side-btn {
		    width: 100%;
		    margin-bottom: 10px;
		    padding: 14px 0;
		    color: #fff;
		    background: #0c9;
		    font-size: 20px;
		    border-radius: 0;
		    border: none;
		}
	</style>
</head>
<body>    
	<div class="container">
	        <div class="row">
	            <div class="col-12 col-md-12">
					<div class="panel panel-default">
						<div class="panel-body form-horizontal">
							<div class="clearfix text-center item-header">
							    <span class="line"></span>
							    <span class="text-center item-title">更新文章</span>
							    <span class="line"></span>
							</div>
						</div>
						<div class="panel-body form-horizontal">
							<div th:switch="${message}">
								<div th:case="'Success'" class="alert alert-success">
									<strong>修改成功!</strong>
								</div>
								<div th:case="'Failed'" class="alert alert-danger">
									<strong>修改失败!</strong> 请稍后再试
								</div>
								<div th:case="'IsNull'" class="alert alert-danger">
									<strong>修改失败!</strong> 请填写标题和内容
								</div>
							</div>
							<form class="form-horizontal" id="publish" th:action="@{modArticle}" method="post">
								<input type="hidden" name="articleId" th:value="${article.articleId}">
								<input type="hidden" name="articleClicks" th:value="${article.articleClicks}">
								<div class="panel-body form-horizontal">
									<div class="form-group">
										<input class="form-control" name="articleTitle" id="title" type="text" th:value="${article.articleTitle}" placeholder="请输入文章标题">
										<div class="help-block text-left"></div>
									</div>
									<div class="form-group">
										<select name="atypeId" class="form-control col-sm-3">
											<option th:each="atype:${atypeList}"
													th:value="${atype.atypeId}"
													th:text="${atype.atypeName}"></option>
										</select>
									</div>
							        <!-- 富文本编辑器 -->
							        <div class="form-group">
							            <div class="col-12">
							                <div id="editor"></div>
											<textarea id="container" name="articleContent" style="display:none;height: 100%;width: 100%" ></textarea>
											<textarea id="showContent" style="display:none;height: 100%;width: 100%" th:text="${article.articleContent}"></textarea>
							            </div>
							        </div>
							        <input type="submit" class="side-btn" Text="修改"/>
							    </div>
							</form>
						</div>
					</div>
	            </div>
	        </div>
	    </div>
	</div>
</body>
</html>
<script>
	$(function(){
		$("#publish").validate({
			rules: {
				articleTitle:{
					required: true,
					minlength: 5,
					maxlength:50,
				},
			},
			messages:{
				articleTitle:{
					required: "标题不能为空",
					minlength: "标题长度不能少于5个字符",
					maxlength: "用户名长度不能超过20个字符",
				},
			}
		});
	});
</script>

<script type="text/javascript">
  const text = document.getElementById("showContent").value;
  const E = window.wangEditor;
  const editor = new E('#editor');
  const $text1 = $("#container");
  editor.config.showLinkImg = false
  editor.config.uploadFileName = "fileName";
  editor.config.height = 600;
  editor.config.uploadImgHooks = {
    before: function (xhr, editor, files) {
    },
    fail: function (xhr, editor, result) {
      console.log("上传失败,原因是" + result);
    },
    customInsert: function (insertImg, result, editor) {
      // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
      // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
      // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
      const url = result.url;
      insertImg(url)
      // result 必须是一个 JSON 格式字符串！！！否则报错
    }
  };
  editor.config.uploadImgMaxLength = 1
  editor.config.onchange = function (html) {
    // 第二步，监控变化，同步更新到 textarea
    $text1.val(html)
  };
  editor.create();
  editor.txt.html(text);
  // 第一步，初始化 textarea 的值
  $text1.val(editor.txt.html());
</script>

